<template>
    <div>
        <div class="conta_main">
            <div style="display: flex;align-items: baseline;"><h4>优秀合格率</h4></div>
            <el-table
                :data="dataList['classList']" border highlight-current-row 
                @sort-change="sortChange($event, dataList['classList'])" :height="tableHeight" 
                :summary-method="getSummaries" show-summary
                class="table student-down-table tabs" ref="avgTable"
                :header-cell-style="{background: '#f1f1f1', color: '#333',borderColor: 'rgb(193 193 193)'}">
                <el-table-column label="班级名称" prop="className" align="center" min-width="90" header-align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toClassKanban(scope.row)" class="idAddName">{{scope.row.className}}</el-button>   
                    </template>
                </el-table-column>
                <el-table-column label="科目" prop="subjectName" align="center" min-width="90" header-align="center"></el-table-column>
                <el-table-column label="授课教师" prop="teacherName" align="center" min-width="90" header-align="center"></el-table-column>
                <el-table-column label="参考人数" prop="stuNum" align="center" min-width="90" header-align="center"></el-table-column>
                <template v-for="(c,i) in columnsList">
                    <el-table-column :prop="c.props" :label="c.name" :sort-orders="['ascending', 'descending']" sortable="column" :key="(i+1)+'bb'" header-align="center" :align="c.align"></el-table-column>
                    <el-table-column v-if="i==0" :prop="c.props+'Rank'" label="排名" :key="(i+2)+'cc'" class="hover_column" header-align="center" :align="c.align">
                        <template slot-scope="scope" slot="header">                                                                
                            <div @click="defaultSort = (defaultSort=='null' ? true : !defaultSort)" class="pointer-btn">
                                <span>{{scope.column.label}}</span>
                                <span class="caret-wrapper">
                                    <!-- 升序 -->
                                    <i class="sort-caret ascending" :class="{'default-sort': (defaultSort && defaultSort !='null')}"></i>
                                    <!-- 降序 -->
                                    <i class="sort-caret descending" :class="{'default-sort': !defaultSort && defaultSort != 'null'}"></i>
                                </span>
                            </div>                               
                        </template> 
                    </el-table-column>
                    <el-table-column v-else :prop="c.props+'Rank'" label="排名" :sort-orders="['ascending', 'descending']" sortable="column" :key="(i+2)+'cc'" class="hover_column" header-align="center" :align="c.align"></el-table-column>
                </template>                  
            </el-table>
        </div>
    </div>
</template>
<script>
import {sort} from '@/utils/helper';
export default {
    name: "classLevel6",//查询维度-优秀/合格率
    props: {
        dataList: Object,
        searchForm: Object,
        searchForms1: Object,
    },
    data() {
        return {
            sort: sort,
            searchForms: {},
            columnsList: [
                {name: '平均分',props: 'avgScore', align: 'right',},
                {name: '优秀率',props: 'good', align: 'right',},
                {name: '合格率',props: 'pass', align: 'right',},
                {name: '低分率',props: 'low', align: 'right',},
            ],
            tableHeight:400,
            isDel:false,
            defaultSort: true,//默认表格排序
        }
    },
    mounted(){
        this.searchForms = this.searchForm;
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - this.$refs.avgTable.$el.offsetTop - 60;
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - self.$refs.avgTable.$el.offsetTop - 60
            }
        })
    },
    watch: {
        'searchForms1':{
            handler: function(val){
                this.initPage();
            },
            deep: true
        },
        'dataList':{
            handler: function(val){
                // this.initPage();
            },
            deep: true
        },
        'defaultSort': function(newVal, oldVal){
            if(newVal == 'null'){//排序不是默认的，要把默认排序清空
                return false;
            }
            this.handlerDefaultSort();
        }
    },
    methods: {
        initPage(){
            let _this = this;
            _this.defaultSort = true;
            // setTimeout(()=>{
                _this.$nextTick(() => {//解决固定列错位问题
                    _this.handlerDefaultSort(); //默认排序总分排名 升序 
                });
                // }
              
            // }, 100)  
        },
        /**
         * 清除类
         */
        clearClassName(name){
            let currentTable = document.querySelector(`.${name}`);
            var selfClassName = [];
            if(currentTable){//因为表格是循环的，所以在排序的时候，不影响 其他表格
                selfClassName = currentTable.getElementsByClassName("is-sortable");
            }else{
                selfClassName = document.getElementsByClassName("is-sortable");
            }
            // selfClassName = document.getElementsByClassName("is-sortable");
            var hasDescendingClassNameStt = false;
            var hasAscendingClassNameStt = false;
            for(var a =0;a<selfClassName.length;a++){
                // 清除倒序className
                hasDescendingClassNameStt = selfClassName[a].classList.contains('descending');
                if(hasDescendingClassNameStt){
                    selfClassName[a].classList.remove('descending')
                }
                // 清除正序className
                hasAscendingClassNameStt = selfClassName[a].classList.contains('ascending');
                if(hasAscendingClassNameStt){
                    selfClassName[a].classList.remove('ascending')
                }
            }
        },
         /**
         * 页面渲染默认排序
         */
        handlerDefaultSort(){   
            if(this.$refs.avgTable){
                this.clearClassName('avgTable');
                this.$refs.avgTable.clearSort();
            }     
            let order = '';
            if(this.defaultSort){//为true则为升序
                order='ascending';
            }else{
                order ='descending';
            }
            if(this.dataList && this.dataList.classList && this.dataList.classList.length){
                if(this.dataList.classList[0].hasOwnProperty('avgScoreRank')){//平均分排名 排序
                    this.sort(this.dataList.classList, 'avgScoreRank', order=='ascending');
                }
            }
            
        },    
        /**
         * 表头排序
         */
        sortChange(val, dataList, name, tableIndex){ 
            
            if(val.prop != 'avgScoreRank'){
                this.defaultSort = 'null';
            }else{
                this.clearClassName(name);
            } 
            
            this.sort(dataList, val.prop, val.order=='ascending');
        },
        //求和
        getSummaries(param){
            let _this =this;            
            this.$nextTick(() => {//第一次加载合计行不显示问题，重新渲染一次
                if(_this.$refs.avgTable){
                    _this.$refs.avgTable.doLayout();
                }
            });
            const { columns, data } = param;
            const sums = [];
            let gradeList = this.dataList['gradeList'][0];
            if(!gradeList){ return false; }
            columns.forEach((column, index) => {
                sums.push(gradeList[column['property']]);         
            });               
            return sums;
        },
        //班级看板（行政班）
        toClassKanban(row){
            let params = {
                className:row.className,
                classId:row.classId,//班级ID
                isScoreType: this.dataList['grade'] == 17, //分数类型 0原始分 1等级分   高三才有等级分，其他默认原始分
                scoreType: this.searchForms.scoreType,//0原始分 1等级分
                yearly: this.searchForm.yearly,
                testId: this.dataList['testIdA'],
                testIdA: this.dataList['testIdA'],//考试批次ID
                testIdB: this.dataList['testIdB'],
                subjectId: row.subjectId,
                subjectName: row.subjectName,
                grade: this.searchForm.grade,//年级
                classType: row.classType,//classType: 0行政班；1教学班；
            }
            this.$emit('classTo1', params);
        }
    }
}
</script>
<style lang="scss" scoped>
.conta_main{
    h4{
        margin-top: 20px;
    }
    .score_tag{
        font-size: 14px;
        color: #02a7f0;
        margin-left: 20px;
    }
    /* 负数 */
    .minus-number{
        color: red;
    }
    .positive-number{
        color: #70B603;
    }
}
</style>